<template>
  <div class="ingredients-container table-gl-w">
    <div class="search-con search-w">
      <FilterTable :filterItem="filterItem" :isReset="true" @search="searchByVal"></FilterTable>
    </div>
    <div class="table-gl-con">
      <TableWrap style="flex: 1" @refresh="sizeChange(20)">
        <template #headerLeft>
          <a-button type="primary" @click="show('add')" v-if="$authPass('product.packing.saveOrUpdate')">添加包装</a-button>
          <a-button class="ml10" type="primary" @click="del(rowSelList, 'mul')" v-if="$authPass('product.packing.del')">删除包装</a-button>
          <!-- <a-dropdown class="dropdown">
            <a-button class="gray-outline ml10">导入 <icon-down /></a-button>
            <template #content>
              <a-doption>导入新增辅料产品</a-doption>
              <a-doption>导入更新辅料产品</a-doption>
            </template>
          </a-dropdown> -->
          <span style="display: inline-block; margin-left: 5px">
            <span>已选：</span>
            <span style="color: #1966ff">{{ rowSelList.length }}</span>
          </span>
          <a-button type="text" class="ml10" @click="rowSelList = false">清除已选</a-button>
          <!-- <a-dropdown class="dropdown">
            <a-button style="margin-left: 5px" class="gray-outline">批量操作 <icon-down /></a-button>
            <template #content>
              <a-doption>批量更新产品图片</a-doption>
              <a-doption>更新持有人信息</a-doption>
              <a-doption>合并SKU到SPU中</a-doption>
              <a-doption>删除产品</a-doption>
            </template>
          </a-dropdown> -->
        </template>
        <template #tableBody>
          <a-spin :loading="loading" style="width: 100%; height: 100%">
            <a-scrollbar style="height: 100%; width: 100%; overflow: auto">
              <div v-if="tableList[0]">
                <Item v-for="item of tableList" :item="item" @opreate="toOpearte($event, item)" />
              </div>
              <a-empty v-else />
            </a-scrollbar>
          </a-spin>
        </template>
      </TableWrap>
      <div class="pagination-footer">
        <a-pagination size="mini" :page-size-options="[20, 50, 100, 200, 500]" show-total show-page-size :total="pageNation.total" :default-page-size="pageNation.pageSize" :current="pageNation.pageNum" style="float: right" @page-size-change="sizeChange" @change="changePage" />
      </div>
    </div>
  </div>

  <Detail ref="detail" :type="type" :info="info" @save="sizeChange(20)" :shopList="shopList" />
  <ShowItemDetail ref="showItemDetail" :info="info" />
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs, computed } from 'vue'
  import { pageExpressAddress, delExpressAddress } from '@/api/warehouse'
  import { getCategoryList, getBrandList, pagePacking, delPacking } from '@/api/product'
  import { findShopMarketByParam } from '@/api/system'
  import { Modal, Message } from '@arco-design/web-vue'
  import FilterTable from '@/components/TableFilter.vue'
  import TableWrap from '@/components/TableWrap.vue'
  import Item from './components/item.vue'
  import Detail from './components/detail.vue'
  import ShowItemDetail from './components/showItemDetail.vue'

  export default defineComponent({
    components: { FilterTable, TableWrap, Item, Detail, ShowItemDetail },
    setup() {
      const detail = ref()
      const showItemDetail = ref()
      const data: any = reactive({
        filterItem: [
          // {
          //   type: 'cascader',
          //   key: 'categoryIdList',
          //   optionItems: [],
          //   keyWidth: '120',
          //   value: ref(),
          //   placeholder: '类目',
          //   label: '类目',
          //   width: 180,
          //   isMultiple: false,
          // },

          {
            key: 'sellerMarketId',
            label: '店铺',
            value: ref(),
            type: 'select',
            width: 140,
            optionItems: [],
            attrs: {
              'allow-search': true,
            },
          },
          {
            type: 'input_keyword',
            key: 'skuNameList',
            keyItems: [
              { label: '包装名称', value: 'skuNameList' },
              { label: 'SKU', value: 'skuList' },
            ],
            keyWidth: '100',
            value: ref(),
            placeholder: '请输入',
            label: '包装名称',
            width: 160,
            isMultiple: true,
          },
        ],
        tableList: [],
        pageNation: { total: 0, pageSize: 20, pageNum: 1 },
        loading: true,
        searchValue: {},
        type: 'add',
        info: {},
        skuTypeList: 'PACKING',
        shopList: [],
        activePage: '包装',
      })

      const rowSelList = computed({
        set: (val) => {
          data.tableList.map((e: any) => (e.isSel = false))
        },
        get: () => {
          let arr = []
          arr = data.tableList.filter((e: any) => e.isSel)
          return arr
        },
      })

      const searchByVal = (info: any) => {
        data.searchValue = {}
        data.searchValue = info

        if (data.searchValue.skuNameList) {
          data.searchValue.skuNameList = data.searchValue.skuNameList.split(',')
        }
        if (data.searchValue.skuList) {
          data.searchValue.skuList = data.searchValue.skuList.split(',')
        }

        if (data.searchValue.skuNameList == '') delete data.searchValue.skuNameList
        if (data.searchValue.skuList == '') delete data.searchValue.skuList

        data.pageNation.pageNum = 1
        getList()
      }

      const changePage = (val: number) => {
        data.pageNation.pageNum = val
        getList()
      }

      const sizeChange = (val: number) => {
        data.pageNation.pageNum = 1
        data.pageNation.pageSize = val
        getList()
      }

      const getList = async () => {
        data.loading = true
        let params = {
          ...data.searchValue,
          skuTypeList: [data.skuTypeList],
          pageNum: data.pageNation.pageNum,
          pageSize: data.pageNation.pageSize,
        }
        data.tableList = []
        const res: any = await pagePacking(params)
        if (res.code == 'SUCCESS') {
          data.pageNation.total = res.data.total
          data.tableList = res.data.records
        }
        data.loading = false
      }

      const show = (type: string, info?: any) => {
        data.info = info || {}
        data.type = type
        detail.value.visible = true
      }

      const del = (list: any, type: String) => {
        if (type == 'mul' && !list[0]) {
          return Message.error('请先选择需要删除的数据')
        }
        Modal.error({
          title: '提示',
          content: '是否删除？',
          titleAlign: 'start',
          cancelText: '取消',
          hideCancel: false,
          onBeforeOk: async (done) => {
            const res: any = await delPacking(list.map((e: any) => e.id))
            if (res.code == 'SUCCESS') {
              Message.success('删除成功')
              rowSelList.value = false
              sizeChange(20)
            }
          },
        })
      }

      // const getCategory = async () => {
      //   const res: any = await getCategoryList()
      //   data.filterItem[0].optionItems = res?.data || []
      // }

      const getShop = async () => {
        let params = {
          pageSize: 9999,
        }
        const res = await findShopMarketByParam(params)
        let arr = res?.data || []
        data.shopList = arr
        data.filterItem[0].optionItems = arr.map((e: any) => {
          e.label = e.shopName
          e.value = e.sellerMarketId
          return e
        })
      }

      const toOpearte = (type: any, item: any) => {
        if (type == 'edit') {
          show('edit', item)
        } else if (type == 'del') {
          del([item], 'single')
        } else {
          data.info = item
          showItemDetail.value.visible = true
        }
      }

      getList()
      // getCategory()
      getShop()

      return {
        ...(toRefs(data) as any),
        changePage,
        sizeChange,
        searchByVal,
        show,
        del,
        toOpearte,
        detail,
        showItemDetail,
        rowSelList,
      }
    },
  })
</script>

<style lang="less" scoped>
  .ingredients-container {
    height: calc(100vh - @menuAndTabHeight);
  }

  .arco-scrollbar-type-embed {
    height: 100%;
  }

  .item {
    width: 242px;
    // box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.5);
    // box-shadow: 0 0 2px 2px #eee;
    // border: 1px solid red;
    .img {
      width: 240px;
      height: 240px;
    }
  }
</style>
